<!--
 * @Author: zsc
 * @Date: 2022-06-21 23:13:42
 * @LastEditors: zsc
 * @LastEditTime: 2022-07-16 23:41:52
 * @Description:房间多选
-->
<template>
  <el-select
    :value="value"
    multiple
    placeholder="请选择房间"
    filterable
    clearable
    @input="$emit('input', $event)"
  >
    <el-option
      v-for="item in stateOptions"
      :key="item.id"
      :label="item.name"
      :value="item.id"
    />
  </el-select>
</template>

<script>
import { roomColumn } from '@/api/room'
export default {
  props: {
    value: {
      type: [Array],
      default: () => []
    },
    buildingId: {
      type: [Number],
      default: -1
    }
  },
  data() {
    return {
      listQuery: {
        building_id: this.buildingId
      },
      stateOptions: []
    }
  },
  computed: {},
  watch: {
    buildingId(val) {
      if (val) {
        this.value = []
        this.listQuery.building_id = this.buildingId
        this.getList()
      }
    }
  },
  created() {
    this.getList()
  },
  methods: {
    async getList() {
      const res = await roomColumn(this.listQuery)
      const { data } = res
      this.stateOptions = data
    }
    // otherData(event) {
    //   console.log(event)
    //   const data = this.stateOptions.find(p => p.id === event)
    //   this.$emit('otherData', data)
    // }
  }
}
</script>
